/**
 * Created by chocolate on 16/5/2.
 */
import React, {
    Component,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
} from 'react-native';

class Title extends Component{
    constructor(props){
        super(props);

    }
    render(){
        var {left,center,right,leftAct,rightAct} = this.props.title; //解构赋值
        var imgLeft = null;
        var imgRight = null;
        switch(left){
            case "返回":
                imgLeft = require('../../icon/back.png');
                left='';
                break;
            case "刷新":
                imgLeft = require('../../icon/refresh.png');
                left='';
                break;
            default:
                break;
        }
        switch(right){
            case "绑定":
                imgRight = require('../../icon/plus.png');
                right='';
                break;
            case "刷新":
                imgRight = require('../../icon/refresh.png');
                right='';
                break;
            default:
                break;
        }

        return (
            <View style={styles.titleContainer}>

                <TouchableOpacity style={styles.leftButton} onPress={leftAct}>
                    <Image source = {imgLeft}/>
                    <Text style={styles.buttonText}>{left}</Text>
                </TouchableOpacity >

                <View style={styles.title}>
                    <Text style={styles.titleText}>{center}</Text>
                </View>

                <TouchableOpacity style={styles.rightButton} onPress={rightAct}>
                    <Text style={styles.buttonText}>{right}</Text>
                    <Image source = {imgRight}/>
                </TouchableOpacity>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    titleContainer: {
        height: 66,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor:'#2981b1',
        paddingTop:20,
    },
    leftButton:{
        width:40,
        height:40,
        flexDirection: 'row',
        marginLeft:15,
        alignItems:'center',
        justifyContent:'flex-start'
    },
    rightButton:{
        width:40,
        height:40,
        flexDirection: 'row',
        marginRight:15,
        alignItems:'center',
        justifyContent:'flex-end'
    },
    buttonText:{
        fontSize:16,
        color:'#FFFFFF'
    },
    title:{
    },
    titleText:{
        fontSize:20,
        color:'#FFFFFF'
    },
})

module.exports = Title;